<template>
  <!-- 意见反馈 -->
  <view class="content">
    <cc-goback title='意见反馈' color="#fff"></cc-goback>
    <view class="navigation_head">
    </view>
    <view class="head">
    </view>
    <view class="box">
      <view class="uni-textarea">
        <textarea class="JTxtArea lg" placeholder-style="color:#999999" placeholder="请输入您的意见" :maxlength="300"
          :data-maxnum="reason.length+'/300'" v-model="reason"></textarea>
      </view>
      <view class="img">
        上传图片
      </view>
      <view class="upload">
       <uploadImg ref='gUpload' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control'  :columnNum="columnNum" ></uploadImg>
      </view>
    </view>
    <view class="foot">
        <button type="primary">提交</button>
    </view>
  </view>
</template>
<script>
 import uploadImg from "../../components/xiaohuang-uploadImg/uploadImg.vue"
  export default {
    components:{
    	uploadImg
    },
    data() {
      return {
        reason: '',
       control: true,
       columnNum: 4,
       imgList: []
      };
    },
    methods: {
    	chooseFile(list, v) {
    				        console.log("上传图片_list：", list)
    				        console.log("上传图片_v：", v)
    				      },
    	imgDelete(list, eq) {
    				        console.log("删除图片_list：", list)
    				        console.log("删除图片_eq：", eq)
    				      }
    },
  }
</script>

<style lang="scss">
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }


  .head {
    width: 100%;
    height: 200rpx;
    background-color: #4EA1FF;
  }

  .box {
    position: relative;
    width: 702rpx;
    height: 806rpx;
    background-color: #FFFFFF;
    position: absolute;
    top: 236rpx;
    left: 24rpx;
    box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
  }

  .uni-textarea {
    height: 450rpx;
    margin: 38rpx 30rpx 0;
    border-bottom: 1rpx solid #EEEEEE;
  }

  .JTxtArea {
    background-color: #FFFFFF;
    border-radius: 5rpx;
    width: calc(100% - 16rpx);
    // box-sizing: border-box;
    padding: 12rpx 12rpx 35rpx;
    min-height: 60rpx;
    line-height: 40rpx;
    color: #000000;
    position: relative;

    &.sm {
      min-height: 30rpx;
    }

    &.lg {
      min-height: 350rpx;
    }

    &:after {
      content: attr(data-maxnum);
      position: absolute;
      right: 5rpx;
      bottom: 0rpx;
      font-size: 30rpx;
      color: #999999;
    }
  }
  .img{
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 30rpx 0 0 30rpx;
  }
  .upload{
    width:780rpx;
    height: 180rpx;
    position: absolute;
    top: 600rpx;
    left: 20rpx;
    z-index: 1;
  }
  .foot{
    width: 702rpx;
    height: 80rpx;
    position: absolute;
    left: 24rpx;
    bottom: 100rpx;
    }
</style>
